<template>
  <div class="quality-data-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>质量数据管理</h2>
    </div>

    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-title">合格数量</div>
            <div class="stats-number" style="color: #67C23A;">235</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-title">合格率</div>
            <div class="stats-number" style="color: #67C23A;">98.5%</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-title">待处理</div>
            <div class="stats-number" style="color: #E6A23C;">23</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-title">不合格</div>
            <div class="stats-number" style="color: #F56C6C;">18</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 搜索和筛选区域 -->
    <el-card class="search-card">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-date-picker
            v-model="searchForm.startDate"
            type="date"
            placeholder="开始日期"
            style="width: 100%;"
          />
        </el-col>
        <el-col :span="4">
          <el-date-picker
            v-model="searchForm.endDate"
            type="date"
            placeholder="结束日期"
            style="width: 100%;"
          />
        </el-col>
        <el-col :span="4">
          <el-select v-model="searchForm.category" placeholder="全部类别" style="width: 100%;">
            <el-option label="全部类别" value=""></el-option>
            <el-option label="原材料" value="raw"></el-option>
            <el-option label="半成品" value="semi"></el-option>
            <el-option label="成品" value="finished"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="searchForm.status" placeholder="全部状态" style="width: 100%;">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="合格" value="qualified"></el-option>
            <el-option label="不合格" value="unqualified"></el-option>
            <el-option label="待处理" value="pending"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchData">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 质量合格率趋势图 -->
    <el-card class="chart-card">
      <div class="card-header">
        <span>质量合格率趋势</span>
      </div>
      <div class="chart-container">
        <div ref="trendChart" style="width: 100%; height: 300px;"></div>
      </div>
      <div class="chart-tabs">
        <el-button-group>
          <el-button :type="activeTab === 'raw' ? 'primary' : 'default'" @click="switchTab('raw')">原材料合格</el-button>
          <el-button :type="activeTab === 'semi' ? 'primary' : 'default'" @click="switchTab('semi')">半成品合格</el-button>
          <el-button :type="activeTab === 'finished' ? 'primary' : 'default'" @click="switchTab('finished')">成品合格</el-button>
        </el-button-group>
      </div>
    </el-card>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts'

const searchForm = ref({
  startDate: '2024-01-01',
  endDate: '2024-01-31',
  category: '',
  status: ''
})

const activeTab = ref('raw')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(3)
const trendChart = ref()
let chartInstance: echarts.ECharts | null = null

// 图表数据
const chartData = ref({
  raw: {
    dates: ['1月1日', '1月6日', '1月11日', '1月16日', '1月21日', '1月26日', '1月31日'],
    values: [95, 96, 94, 97, 96, 98, 97]
  },
  semi: {
    dates: ['1月1日', '1月6日', '1月11日', '1月16日', '1月21日', '1月26日', '1月31日'],
    values: [92, 94, 93, 95, 94, 96, 95]
  },
  finished: {
    dates: ['1月1日', '1月6日', '1月11日', '1月16日', '1月21日', '1月26日', '1月31日'],
    values: [98, 99, 97, 99, 98, 100, 99]
  }
})

const tableData = ref([
  {
    batchNo: '202510004',
    status: '已处理',
    category: '原料',
    testDate: '12/01',
    inspector: '张三',
    result: '合格',
    score: '90',
    remark: '92+合格率>89',
    qualityScore: '合格',
    processingStatus: '批量生产'
  },
  {
    batchNo: '202510006',
    status: '已驳回',
    category: '原料',
    testDate: '40',
    inspector: '李四',
    result: '不合格',
    score: '92+合格率>89',
    remark: '合格',
    qualityScore: '不合格',
    processingStatus: '需要返工'
  },
  {
    batchNo: '202510008',
    status: '已驳回',
    category: '原料',
    testDate: '60',
    inspector: '王五',
    result: '不合格',
    score: '92+合格率>89',
    remark: '不合格 需要进一步检查和处理',
    qualityScore: '不合格',
    processingStatus: '需要返工'
  }
])

const searchData = () => {
  ElMessage.success('搜索完成')
}

const switchTab = (tab: string) => {
  activeTab.value = tab
  updateChart()
}

// 初始化图表
const initChart = () => {
  if (!trendChart.value) return
  
  chartInstance = echarts.init(trendChart.value)
  updateChart()
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chartInstance?.resize()
  })
}

// 更新图表数据
const updateChart = () => {
  if (!chartInstance) return
  
  const currentData = chartData.value[activeTab.value as keyof typeof chartData.value]
  const option = {
    title: {
      text: `${getTabName(activeTab.value)}合格率趋势`,
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c}%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: currentData.dates,
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      },
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      min: 80,
      max: 100,
      axisLine: {
        lineStyle: {
          color: '#ddd'
        }
      },
      axisLabel: {
        color: '#666',
        formatter: '{value}%'
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0'
        }
      }
    },
    series: [
      {
        name: '合格率',
        type: 'line',
        data: currentData.values,
        smooth: true,
        lineStyle: {
          color: getLineColor(activeTab.value),
          width: 3
        },
        itemStyle: {
          color: getLineColor(activeTab.value)
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: getLineColor(activeTab.value) + '40'
              },
              {
                offset: 1,
                color: getLineColor(activeTab.value) + '10'
              }
            ]
          }
        }
      }
    ]
  }
  
  chartInstance.setOption(option)
}

// 获取标签名称
const getTabName = (tab: string) => {
  const names: Record<string, string> = {
    raw: '原材料',
    semi: '半成品',
    finished: '成品'
  }
  return names[tab] || ''
}

// 获取线条颜色
const getLineColor = (tab: string) => {
  const colors: Record<string, string> = {
    raw: '#5470c6',
    semi: '#91cc75',
    finished: '#fac858'
  }
  return colors[tab] || '#5470c6'
}

onMounted(() => {
  nextTick(() => {
    initChart()
  })
  console.log('质量数据管理页面加载完成')
})
</script>

<style scoped>
.quality-data-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.page-header h2 {
  margin: 0;
  color: white;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  text-align: center;
}

.stats-content {
  padding: 20px;
}

.stats-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.stats-number {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}

.search-card {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.chart-container {
  margin-bottom: 20px;
}

.chart-tabs {
  text-align: center;
}

.table-card {
  background: white;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-actions {
  display: flex;
  gap: 10px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 20px 0;
}
</style>